<template>
  <div class="app-container">
  <div>
      <tinymce v-model="content" :height="300" />
  </div>
  </div>
</template>

<script>
import { getList } from '@/api/table'
import Tinymce from '@/components/Tinymce'

export default {
  components: { Tinymce },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      content:
      `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1>\n<p style="text-align: center; font-size: 15px;">&nbsp;</p>\n<p>来一个富文本示例</p>`
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    }
  }
}
</script>
